<template>
  <view class="evaluate-container" v-if="comList.length > 0">
    <view class="item" v-for="item in comList" :key="item.id">
      <view class="top">
        <up-text
          mode="name"
          :text="item.username"
          format="encrypt"
          class="username"></up-text>
        <view class="time">{{ item.publishTime }}</view>
      </view>
      <view class="content">
        <up-text :lines="2" :text="item.content"></up-text>
      </view>
      <view class="score">
        <up-rate
          count="5"
          v-model="item.score"
          activeColor="#f9acb4"
          size="26"
          readonly></up-rate>
      </view>
    </view>
  </view>
  <up-empty v-else mode="data"></up-empty>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getAllComment } from '../../api/user.js'

const comList = ref([])
const getComment = async () => {
  const res = await getAllComment()
  comList.value = res.data
  console.log(comList.value)
}
getComment()
</script>

<style lang="scss" scoped>
.evaluate-container {
  width: 100%;
  height: 960rpx;
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  overflow-y: auto;
  .item {
    width: 100%;
    margin-bottom: 10rpx;
    border-bottom: 1px solid #ccc;
    .top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10rpx;

      .username {
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 30rpx;
        color: #888;
      }

      .time {
        font-size: 26rpx;
        color: #666;
        float: right;
      }
    }

    .score {
      margin-left: -10rpx;
    }

    .content {
      margin-bottom: 10rpx;
    }
  }
}
</style>
